<template>
	<view class="warp">
		<image class="banner" src="/static/image/banner.png" mode="widthFix"></image>
		<view class="info">
			<view class="title">
				视听阅读会员权益
			</view>
			<view class="subtitle">
				业务权益N选一
			</view>

		</view>
		<view class="content">
			<view class="list" v-for="(item,index) in list" :key="index">
				<view class="left">
					<image :src=item.url mode="widthFix"></image>
					<text class="name">{{item.name}}</text>
				</view>
				<view class="center">
					<view class="title">
						{{item.title}}
					</view>
					<text class="subtitle">
						{{item.subtitle}}
					</text>
				</view>
				<view class="right" @click="lingquFun(item.id)">

					<text class="button">去领券</text>

				</view>


			</view>

		</view>

	</view>


</template>

<script setup>
	const {
		mourn,
		theme
	} = useStore()
	const {
		Theme,
		onShow
	} = useTheme()
	const {
		proxy
	} = getCurrentInstance()
	const list = ref([
				{
					id : '100898',
					name: '哔哩哔哩',
					url: '/static/image/bili/哔哩哔哩.jpg',
					title: '价值25元哔哩哔哩大会员月卡',
					subtitle: '你感兴趣的视频都在B站'
				},
				{	id: '100920',
					name: '优酷',
					url: '/static/image/youku/优酷.jpg',
					title: '价值30元的优酷VIP月卡',
					subtitle: '精彩内容 现在就要'
				},
				{	id: '100276',
					name: '饿了么',
					url: '/static/image/elm/饿了么.png',
					title: '价值15元饿了么会员月卡',
					subtitle: '开会员，享饕餮盛宴'
				},
				{	id: '100811',
					name: '芒果TV',
					url: '/static/image/mangguo/芒果.jpg',
					title: '价值30元芒果TVPC影视月卡',
					subtitle: '芒果TV—看见好时光'
				},
				{	id: '100752',
					name: '腾讯视频',
					url: '/static/image/tengxun/腾讯.png',
					title: '价值30元腾讯视频VIP月卡',
					subtitle: '国内领先视频影视平台'
				},
				{	id: '100075',
					name: 'PP视频',
					url: '/static/image/pptv/pptv.jpg',
					title: '价值20元PP视频会员月卡',
					subtitle: '电影电视剧限时免费看'
				},
				{	id: '100148',
					name: '蜻蜓FM',
					url: '/static/image/qingting/蜻蜓.jpg',
					title: '价值25元蜻蜓FM会员月卡',
					subtitle: '听小说、广播电台'
				},
				{	id: '20049',
					name: '喜马拉雅',
					url: '/static/image/ximalaya/喜马拉雅.jpg',
					title: '价值25元喜马拉雅VIP会员月卡',
					subtitle: '听小说 听播客'
				},
				{	id: '100054',
					name: '搜狐',
					url: '/static/image/souhu/搜狐.jpg',
					title: '价值20元搜狐视频会员月卡',
					subtitle: '畅享美剧 万圣狂欢'
				},
				{	id: '100119',
					name: '知乎',
					url: '/static/image/zhihu/知乎.jpg',
					title: '价值25元知乎盐选会员月卡',
					subtitle: '有问题，就会有答案'
				}
			])
	
	onLoad(options => {
		if (!proxy.sjuBase.isNull(options.openid)) {
			proxy.sjuLogin.saveValue("miaoMaGJOpenid", options.openid);
		}
		//isLogin()
	
	})
	const lingquFun = (equityId) =>{
		proxy.sjuNav.navigateTo('/intake/equityinfo?equityId='+equityId)
	}
	
</script>

<style>
	.warp {
		width: 100%;
		height: auto;
		padding: 15px;
		box-sizing: border-box;

	}

	.banner {
		width: 100%
	}

	.info {
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 40px;
		line-height: 40px;
		border-bottom: 1px solid #e2e2e2
	}

	.info .title {
		color: #000;
		font-size: 16px;
		font-weight: bold;

	}

	.info .subtitle {
		padding-left: 15px;
		font-size: 12px;
		color: #7a7e81;
		font-weight: normal;

	}

	.list {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		height: 100px;
		border-bottom: 1px solid #e2e2e2


	}

	.left {
		position: relative;
		width: 20%
	}

	.left image {
		width: 100%;
	}

	.name {
		width: 100%;
		height: 20px;
		background: rgba(0, 0, 0, 0.3);
		color: #fff;
		text-align: center;
		position: absolute;
		left: 0;
		bottom: 5px;
	}

	.center {
		display: flex;
		flex-direction: column;
		width: 60%;
		padding: 0 5px;
		box-sizing: border-box;
	}

	.center .title {
		/* display: flex;
		flex-direction: column; */
		
	}

	.center .title {
	/* 	display: flex;
		flex-direction: column;
		width: 60% */
	}

	.center .subtitle {
		font-style: normal;
		color: #7a7e81;
		border-radius: 3px;
		font-size: 12px;
	}

	.right {
		width: 20%
	}

	.right .button {
		display: inline-block;
		padding: 5px 10px;
		border: 1px solid #e2e2e2
	}
</style>